<script setup lang="jsx">
import { onMounted, ref } from 'vue';
import { Modal as antModal } from 'ant-design-vue';

import { get, post } from '@/service/api/api';
import DownTable from './modules/down-table.vue';
const selList = ref({
  lotId: null
});
const currentStep = ref(0);
const stepStyle = {
  boxShadow: '0px -1px 0 0 #e8e8e8 inset'
};
const currentStatus1 = ref('process');
const currentStatus2 = ref('wait');
const currentStatus3 = ref('wait');
const fusionData = ref({});
const tasList = ref({});
const baseUrl = ref('/dev-api/');
const isdate = ref('');
const isdate2 = ref('');
const isdate1 = ref('');
const isMsg = ref('');
const isMsg1 = ref('');
function getDate() {
  // 创建一个新的Date对象，它默认包含当前的时间和日期
  const now = new Date();

  // 获取年份（注意：getFullYear()返回的是四位数年份）
  const year = now.getFullYear();

  // 获取月份（注意：getMonth()返回的月份是从0开始的，所以我们需要加1）
  const month = now.getMonth() + 1;

  // 获取日期
  const day = now.getDate();

  // 获取小时（注意：getHours()返回的是24小时制的小时）
  const hours = now.getHours();

  // 获取分钟
  const minutes = now.getMinutes();

  // 获取秒
  const seconds = now.getSeconds();

  // 格式化月、日、时、分、秒为两位数（如果是个位数，则在前面补0）
  const formattedMonth = month < 10 ? `0${month}` : month;
  const formattedDay = day < 10 ? `0${day}` : day;
  const formattedHours = hours < 10 ? `0${hours}` : hours;
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
  const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;

  // 拼接成所需的日期时间格式
  return `${year}-${formattedMonth}-${formattedDay} ${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
const itemList = ref([
  {
    title: '查询配方',
    subTitle: isdate2,
    status: currentStatus1,
    description: '请输入批卡号进行配方查询'
  },
  {
    title: '确认配方',
    subTitle: isdate,
    status: currentStatus2,
    description: isMsg1
  },
  {
    title: '下发配方',
    subTitle: isdate1,
    status: currentStatus3,
    description: isMsg
  }
]);
onMounted(() => {
  isdate2.value = getDate();
});
function inputMethod() {
  get('/mes/pressRelease/getReleaseParam', selList.value).then(({ data, error }) => {
    // if (!error) {
    //   textareas.value = JSON.stringify(data, null, 2);
    // }
    fusionData.value = data;
    tasList.value = data.list;
    isdate.value = getDate();
    currentStep.value = 1;
    currentStatus1.value = 'finish';
    currentStatus2.value = 'process';
    currentStatus3.value = 'wait';
    isMsg1.value = '配方查询成功,确认配方信息';
    if (data.image) {
      fusionData.value.image = baseUrl.value + data.image;
    }
  });
}
function getImgScaleY() {
  // img 背景图高度
  const imgHeight = height.value - 151;
  // img原始高度
  const naturalHeight = getHiddenImgHeight();

  return imgHeight / naturalHeight;
}
const imgScaleY = ref(1);
function getBaseUrl() {
  if (location.hostname === 'localhost') {
    baseUrl.value = 'http://192.168.166.166/dev-api/';
    return;
  }
  baseUrl.value = '/dev-api/';
}
getBaseUrl();
function search() {
  if (fusionData.value) {
    antModal.confirm({
      title: `是否确认下发参数吗?`,
      onOk: () => {
        const arr = fusionData.value.paramInfo;
        const params = {
          ...arr,
          mainEapNo: 'YH_DZYJ_001'
        };
        post('/mes/pressRelease/preeRelease', params).then(({ error, data, otherData }) => {
          if (!error) {
            // fusionData.value = [];
            // selList.value.liaohao = '';
            // tasList.value = [];
            currentStatus1.value = 'finish';
            currentStatus2.value = 'finish';
            currentStatus3.value = 'process';

            currentStep.value = 2;
            isdate1.value = getDate();
            isMsg.value = otherData.msg;
            window.$message?.success(otherData.msg);
          }
        });
      },
      onCancel: () => {}
    });
  } else {
    window.$message?.error('请先查询料号再确定下发!');
  }
}

// 设置定时器，每1000毫秒（即1秒）更新一次时间

// 初始调用一次以确保页面加载时即显示时间

function reset() {
  fusionData.value = '';
  tasList.value = '';
  selList.value.lotId = '';
  currentStep.value = 0;
  isdate2.value = getDate();
  currentStatus1.value = 'process';
  currentStatus2.value = 'wait';
  currentStatus3.value = 'wait';

  isdate1.value = '';
  isdate.value = '';
  isMsg.value = '';
  isMsg1.value = '';
}
</script>

<template>
  <div class="hot-melt-machine-down-page jl-main-page min-h-500px flex-col-stretch overflow-hidden lt-sm:overflow-auto">
    <div ref="contentRef" class="content h-full flex">
      <div class="laminated-diagram h-full w-500px">
        <div class="msg m-h-100 w-100% flex-center">
          <ACard
            :bordered="false"
            shadow="always"
            style="
              width: 100%;
              max-width: 800px;

              box-sizing: border-box;
              border-radius: 16px;
              overflow: hidden;
              background-color: #ffffff;
              border: solid 1px rgb(168, 189, 132);
            "
          >
            <template #title>
              <div class="card-title">
                <span>大族压机配方信息</span>
              </div>
            </template>
            <div class="card-content">
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">LOT号:</div>
                  <div class="item-value">{{ fusionData.lotNo }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">生产型号:</div>
                  <div class="item-value">{{ fusionData.prodNo }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">客户代码:</div>
                  <div class="item-value">{{ fusionData.custNo }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">切板尺寸长(mm):</div>
                  <div class="item-value">{{ fusionData.meridional }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">切板尺寸宽(mm):</div>
                  <div class="item-value">{{ fusionData.zonal }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">压合厚度(mm):</div>
                  <div class="item-value">{{ fusionData.thickness }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">内层孔到铜(mil):</div>
                  <div class="item-value">{{ fusionData.innerHoleToCopper }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">Tg值:</div>
                  <div class="item-value">{{ fusionData.tgValue }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="center" align="middle">
                <ACol :span="24" class="col-item">
                  <div class="item-label">压合程式:</div>
                  <div class="item-value">{{ fusionData.recipeName }}</div>
                </ACol>
              </ARow>
              <ARow v-if="fusionData.msg" type="flex" justify="center" align="middle" style="margin-top: 24px">
                <ACol :span="24">
                  <div class="message-box">
                    <span class="c-red font-bold">{{ fusionData.msg }}</span>
                  </div>
                </ACol>
              </ARow>
            </div>
          </ACard>
        </div>
        <div class="msg m-h-100 w-100% flex-center">
          <ACard
            :bordered="false"
            shadow="always"
            style="
              width: 100%;
              max-width: 800px;
              margin: 10px auto;
              box-sizing: border-box;
              border-radius: 16px;
              overflow: hidden;
              background-color: #ffffff;
              border: solid 1px rgb(17, 189, 132);
            "
          >
            <template #title>
              <div class="card-title">
                <span>压合程式规则信息</span>
              </div>
            </template>
            <div class="card-content">
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">类型:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.moduleNo }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">Tg值:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.tg }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">内层铜厚:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.innerCopperThickness }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">次外层PP张数:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.outerPpNum }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="24" class="col-item">
                  <div class="item-label">次外层PP规格:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.outerPpSpe }}</div>
                </ACol>
              </ARow>
              <ARow type="flex" justify="space-between" align="middle">
                <ACol :span="12" class="col-item">
                  <div class="item-label">选用程式:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.pressingProgramNo }}</div>
                </ACol>
                <ACol :span="12" class="col-item">
                  <div class="item-label">备注:</div>
                  <div class="item-value">{{ fusionData?.pressingProgramRule?.remark }}</div>
                </ACol>
              </ARow>

              <ARow v-if="fusionData.msg" type="flex" justify="center" align="middle" style="margin-top: 24px">
                <ACol :span="24">
                  <div class="message-box">
                    <span class="c-red font-bold">{{ fusionData.msg }}</span>
                  </div>
                </ACol>
              </ARow>
            </div>
          </ACard>
        </div>
        <div class="laminated-diagram-img flex-center">
          <img
            v-show="false"
            ref="hiddenImgRef"
            :src="fusionData.image"
            alt=""
            class="hidden-img"
            @load="imgScaleY = getImgScaleY()"
          />
          <div
            v-if="fusionData.image"
            class="img"
            :style="{
              transform: `scaleY(${imgScaleY})`,
              backgroundImage: `url(${fusionData.image})`
            }"
          ></div>
          <div v-else class="no-data mt-30 h-full w-full"><AEmpty description="暂无图片" /></div>
        </div>
      </div>
      <div class="detail h-full">
        <div class="lotNo-form h-100px w-100% flex-center">
          <AForm
            :model="selList"
            :label-col="{
              span: 5,
              md: 7
            }"
          >
            <ARow :gutter="[15, 8]" wrap class="w-full">
              <ACol :span="10">
                <AFormItem label="批卡号" name="lotId" class="m-0" :label-col="{}">
                  <AInput
                    v-model:value="selList.lotId"
                    placeholder="请输入批卡号"
                    allow-clear
                    autocomplete="off"
                    @keypress.enter="inputMethod"
                  />
                </AFormItem>
              </ACol>
              <ACol :span="8">
                <div class="ml-20px flex">
                  <AFormItem class="m-0">
                    <div class="w-full flex-y-center justify-end gap-12px">
                      <AButton primary class="mini-btn down-btn" @click="search">
                        <span class="m-auto">确定下发</span>
                      </AButton>
                      <AButton danger class="mini-btn down-btn" @click="reset">
                        <span class="m-auto">清除</span>
                      </AButton>
                    </div>
                  </AFormItem>
                </div>
              </ACol>
            </ARow>
          </AForm>
        </div>
        <div class="h-122px">
          <ASteps v-model:current="currentStep" type="navigation" :style="stepStyle" :items="itemList"></ASteps>
        </div>
        <div class="detail-table">
          <DownTable v-model:list="tasList" class="h-full"></DownTable>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bodyClass {
  width: 99%;
  height: 90%;
  border: 1px solid rgb(167, 172, 255);
}
.titClass {
  height: 60px;
  color: #fff;
  font-weight: 500;
  background-color: rgb(167, 172, 255);
  text-align: center;
  font-weight: 800;
  // font-size: 20px;
  line-height: 30px;
}

.down-btn {
  height: 40px !important;
  width: 200px;
  margin-left: 10px;
  line-height: 0;
}
.table-cell {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
  display: inline-block;
  border-radius: 8px;
  padding: 0 8px;
}

.hot-melt-machine-down-page {
  .content {
    height: 100%;
    background-color: #fff;
    .border-right {
      border-right: 3px solid #247cfe;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      line-height: 40px;
      border-bottom: 1px solid #d9d9d9;
      background-color: #fff;
    }

    .laminated-diagram {
      overflow: hidden;
      .laminated-diagram-img {
        height: calc(100% - 151px);
        padding-top: 10px;

        .img {
          width: 444px;
          height: 100%;
          //background: url('/public/sysDrawProdDraw.jfif');
          background-repeat: no-repeat;
          transform-origin: top;
        }
      }

      .msg {
        padding-left: 5px;
        :deep(.ant-descriptions) {
          .ant-descriptions-item {
            padding-bottom: 5px;
          }
          .ant-descriptions-header {
            margin-bottom: 0;
            .ant-descriptions-title {
              color: #646cff;
              font-size: 24px;
              font-weight: bold;
            }
          }
          // .ant-descriptions-item-label,
          // .ant-descriptions-item-content {
          //   font-size: 20px;
          //   font-weight: bold;
          // }
        }
      }
    }

    .detail {
      width: calc(100% - 500px);
      border-left: 5px solid rgb(236, 242, 250);
      // .list {
      //   overflow-y: auto;
      //   .item {
      //     justify-content: space-between;
      //     line-height: 40px;
      //     font-size: 32px;
      //     font-weight: bold;
      //     // border-bottom: 1px solid #d9d9d9;
      //     &.flex-start {
      //       justify-content: flex-start;
      //     }
      //   }
      // }
    }

    .detail-table {
      padding-top: 8px;

      overflow-y: auto;
      border-top: 5px solid rgb(236, 242, 250);
      height: calc(100% - 223px);

      // :deep(.ant-tabs) {
      //   height: 100%;

      //   .ant-tabs-nav-wrap {
      //     .ant-tabs-tab .ant-tabs-tab-btn {
      //       font-size: 24px;
      //     }
      //   }

      //   .ant-tabs-content-holder {
      //     height: calc(100% - 56px);
      //     .ant-tabs-content {
      //       height: 100%;
      //       .ant-tabs-tabpane {
      //         height: 100%;
      //       }
      //     }
      //   }
      // }
    }

    table {
      border-collapse: collapse;
    }
  }

  .tbody {
    height: calc(100% - 46px);
    overflow-y: auto;
  }
  .thead th {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fff;
  }

  .footer {
    height: 100px;
    border-top: 3px solid #247cfe;
    background-color: #fff;
  }
  .step-completed-icon {
    color: green; /* 设置绿色√的颜色 */
    margin-left: 8px; /* 与步骤标题保持一定的间距 */
  }
  .card-title {
    font-weight: bold;
    margin-top: 10px;
  }
  .col-item {
    display: flex;
    margin-top: 5px;
  }
  .item-label {
    font-weight: 600;
    font-size: 15px;
  }
  .item-value {
    font-weight: 500;
    font-size: 14px;
  }
}
</style>
